<template>
    <!-- 需要全屏区域 用该id盒子包裹 -->
    <!-- <div id="fullscreen" class="fullscreen" ref="fullscreen">

    </div> -->

    <!-- 加上该按钮 -->
    <el-button type="primary" @click="fullScreen()">全屏</el-button>

</template>

<script setup lang="ts">
const fullScreen = () => {
    //全屏
    var full = document.getElementById('fullscreen')
    launchIntoFullscreen(full)
}
//全屏封装
const launchIntoFullscreen = (element: any) => {
    if (element.requestFullscreen) {
        element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
    }
}
//退出全屏封装
// const exitFullscreen =() =>{
//     if (document.exitFullscreen) {
//         document.exitFullscreen()
//     } else if (document.mozCancelFullScreen) {
//         document.mozCancelFullScreen()
//     } else if (document.webkitExitFullscreen) {
//         document.webkitExitFullscreen()
//     }
// }

// const checkFull=()=>{
//     //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
//     //火狐浏览器
//     var isFull = document.mozFullScreen ||
//         document.fullScreen ||
//         //谷歌浏览器及Webkit内核浏览器
//         document.webkitIsFullScreen ||
//         document.webkitRequestFullScreen ||
//         document.mozRequestFullScreen ||
//         document.msFullscreenEnabled
//     if (isFull === undefined) {
//         isFull = false
//     }
//     return isFull;
// }

</script>

<style scoped></style>